<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <!-- 个人信息 -->
    <van-cell
      class="avatar-cell"
      title="头像"
      is-link
      center
      @click="isUpdatePhoto = true"
    >
      <van-image class="avatar" round fit="cover" :src="userInfo.photo" />
    </van-cell>
    <van-cell
      title="昵称"
      :value="userInfo.name"
      is-link
      @click="isUpdateName = true"
    />
    <van-cell
      title="性别"
      :value="userInfo.gender === 0 ? '男' : '女'"
      @click="isUpdateSex = true"
      is-link
    />
    <van-cell
      title="生日"
      :value="userInfo.birthday"
      is-link
      @click="isUpdateBirthday = true"
    />
    <!-- /个人信息 -->
    <van-popup position="bottom" v-model="isUpdatePhoto">修改头像</van-popup>
    <van-popup position="bottom" v-model="isUpdateName">
      <UpdateName
        v-if="isUpdateName"
        @close="isUpdateName = false"
        @input="userInfo.name = $event"
        :value="userInfo.name"
      ></UpdateName>
    </van-popup>
    <van-popup position="bottom" v-model="isUpdateSex">
      <UpdateSex
        v-if="isUpdateSex"
        v-model="userInfo.gender"
        @close="isUpdateSex"
      ></UpdateSex>
    </van-popup>
    <van-popup position="bottom" v-model="isUpdateBirthday">
      <UpdateBirthday
        v-if="isUpdateBirthday"
        v-model="userInfo.birthday"
        @close="isUpdateBirthday = false"
      ></UpdateBirthday>
    </van-popup>
    <!-- <input type="file" ref="iptFile" @change="changeImg" /> -->
    <img :src="img1" style="width: 100px" alt="" />
    <img :src="img2" style="width: 100px" alt="" />
    <input type="file" ref="iptFile" />
    <button @click="changeImg">上传</button>
  </div>
</template>

<script>
import UpdateName from "./component/update-name.vue";
import UpdateSex from "./component/update-sex.vue";
import UpdateBirthday from "./component/update-birthday.vue";

import { getUserInfo, updateUserPhoto } from "@/api/user";
export default {
  name: "UserProfile",
  components: {
    UpdateName,
    UpdateSex,
    UpdateBirthday,
  },
  props: {},
  data() {
    return {
      userInfo: {},
      isUpdatePhoto: false,
      isUpdateName: false,
      isUpdateSex: false,
      isUpdateBirthday: false,
      img1: "",
      img2: "",
    };
  },
  computed: {},
  watch: {},
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    async initData() {
      try {
        let { data } = await getUserInfo();
        this.userInfo = data.data;
        console.log(data);
      } catch (error) {
        console.log(error);
        this.$toast.fail("获取资料失败");
      }
    },
    async changeImg() {
      if (this.$refs.iptFile.files.length === 0) return;
      //文件控件节点的files属性表示选择了的文件信息[文件列表集合]
      console.dir(this.$refs.iptFile);
      console.dir(this.$refs.iptFile.files[0]);
      //1.得到文件信息
      const imgFile = this.$refs.iptFile.files[0];
      const tempUrl = URL.createObjectURL(imgFile);
      this.img1 = tempUrl;
      console.log("选择了文件");
      //2.实例一个formdata对象
      let fd = new FormData();
      //3.放入数据--fd.append('上传字段',文件信息)
      fd.append("photo", imgFile);
      //4.发送请求
      let { data } = await updateUserPhoto(fd);
      console.log(data);
      this.img2 = data.data.photo;
      this.$refs.iptFile.value = null;
    },
  },
};
</script>

<style scoped lang="less">
.user-profile {
  .avatar-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
    .avatar {
      width: 60px;
      height: 60px;
    }
  }
  .van-popup {
    background-color: #f5f7f9;
  }
}
</style>
